/*
 * 整体妆容列表
 * @Author: ljb
 * @Date: 2018-05-22 15:21:47
 * @Last Modified by: ljb
 * @Last Modified time: 2018-09-26 18:00:35
 */
<template>
	<div class="v-customer-overall-makeup-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="makeups"
			:height="tableHeight()"
			class="personal-scrollbar"
			@on-sort-change="sortable"/>

	</div>
</template>

<script>

import Button from 'iview/src/components/button';
import Icon from 'iview/src/components/icon';
import { computedTableHeight } from 'src/views/mixins/computedTableHeight';
import expandRow from './expand-row';

export default {
	name: 'OverallMakeupIndex',
	components: {
		expandRow,
	},
	mixins: [computedTableHeight],
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		makeups: {
			type: Array,
			default() {
				return [];
			},
		},
		classifyList: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			columns: [
				{
					type: 'expand',
					width: 50,
					render: (h, params) => h(expandRow, {
						props: {
							row: params.row,
						},
					}),
				},
				{
					title: this.$t('overall.name'),
					key: 'name',
					align: 'center',
					render: (h, { row }) => <div> { row.name || '-' } </div>,
				},
				{
					title: this.$t('overall.thumb'),
					key: 'thumb_image',
					align: 'center',
					render: (h, { row }) => <div>
						{
							row.thumb
								? <img src={ row.thumb } alt={this.$t('common.none')} width="50%"/>
								: <span>{ this.$t('common.none') }</span>
						}
					</div>,
				},
				{
					title: this.$t('overall.priority'),
					key: 'priority',
					align: 'center',
					sortable: 'custom',
					render: (h, { row }) => <div>{ String(row.priority) || '-' }</div>,
				},
				{
					title: this.$t('overall.is_deleted'),
					key: 'is_deleted',
					align: 'center',
					render: (h, { row }) => <div>
						{
							Number(row.is_deleted) === 0
								? <Icon type="checkmark"></Icon>
								: <Icon type="close"></Icon>
						}
					</div>,
				},
				{
					title: this.$t('overall.category_name'),
					key: 'pack_category_id',
					align: 'center',
					render: (h, { row }) => {
						const value = this.classifyList.filter(err => err.id === row.pack_category_id);
						return (
							<div> { value.length > 0 ? value[0].name : '-' } </div>
						);
					},
				},
				{
					title: this.$t('common.created_at'),
					key: 'created_at',
					align: 'center',
					sortable: 'custom',
					render: (h, { row }) => <div> { !row.created_at ? '-' : row.created_at } </div>,
				},
				{
					title: this.$t('common.updated_at'),
					key: 'updated_at',
					align: 'center',
					sortable: 'custom',
					render: (h, { row }) => <div>{ !row.updated_at ? '-' : row.updated_at }</div>,
				},
				{
					title: this.$t('common.operation'),
					align: 'center',
					width: 200,
					render: (h, { row }) => (
						<div>
							<Button size="small" style={{ marginRight: '5px' }} on-click={() => { this.$emit('show', row); }} type="primary">
								{this.$t('common.edit')}
							</Button>
							<Button size="small" on-click={() => { this.$emit('delete', row.id); }} type="error">
								{this.$t('common.delete')}
							</Button>
						</div>
					),
				},
			],
		};
	},
	methods: {
		/**
		 * 排序的回调
		 * @param  {Object} param {columns列表对应sortable属性所包含，key值，order排序字段}
		 * @return {undefined}
		 */
		sortable(param) {
			const search_param = {
				order_by: param.order === 'normal' ? '' : param.key,

				sort: param.order === 'normal' ? '' : param.order.toLocaleUpperCase(),
			};

			this.$emit('sort', search_param);
		},
	},
};
</script>
